<template>
    <div>
        <div class="topnewtab">
            <div class="tonumber">共计{{$store.state.noticeHidden.length}}条</div>
            <div class="selectnumber">选择：{{selectId.length}}条</div>
        </div>
        <div class="standard-wrap">
            <div v-for="(item,index) in menulist"
                 :key="index">
                <template>
                    <div class="form-item form-item-style1 looktest">
                        <div class="label-title">
                            <label class="lookmsgTwo">{{item.category}}
                                <!--<span>（90分）</span>-->
                            </label>
                        </div>
                        <group>
                            <cell is-link
                                  :border-intent="false"
                                  :arrow-direction="showarr[index]? 'up' : 'down'"
                                  @click.native="showmsg(index)">
                                <span class="selectspan">{{item.child.length}}条</span>
                            </cell>
                        </group>
                    </div>
                    <template v-if="showarr[index]">
                        <div v-for="(itemlist,indexlist) in item.child"
                             :key="indexlist"
                             class="showmsg"
                             @click="selecteitem(itemlist,index,indexlist)">
                            <p>
                                <i class="iconfont checkbox"
                                   :class="[itemlist.checked?'icon-selected':'icon-checkbox-noselected']"></i>
                                <span>{{itemlist.description}}</span>
                            </p>
                        </div>
                    </template>
                </template>
            </div>
        </div>
        <div class="affirm-wrap">
            <button class="affirm"
                    @click="savecheck">确定</button>
        </div>
    </div>
</template>
<script>
import standardItem from './standardItem'
import { XHeader } from 'vux'
export default {
    data () {
        return {
            menulist: [],
            childData: [],
            showarr: [],
            selectId: [],
            type: '',
            userId: '',
            tokenId: '',
            projectId: '',
            userInfo: ''
        }
    },
    components: {
        standardItem,
        XHeader
    },
    created () {
        this.userInfo = JSON.parse(localStorage.userInfo)
        this.userId = this.userInfo.userid
        this.tokenId = this.userInfo.tokenId
        this.projectId = this.userInfo.deptid
        this.getData()
    },
    methods: {
        showmsg (index) {
            this.showarr[index] = !this.showarr[index]
            this.$forceUpdate()
        },
        getData () {
            let listget = JSON.parse(JSON.stringify([...this.$store.state.noticeHidden]))
            this.menulist = []
            listget.forEach(
                (item, index) => {
                    let flag = true
                    for (var indexs = 0; indexs < this.menulist.length; indexs++) {
                        if (item.category == this.menulist[indexs].category) {
                            this.menulist[indexs]['child'].push(item)
                            flag = false
                        }
                        //   indexs++;
                    }
                    if (flag) {
                        this.menulist = [...this.menulist, {
                            category: item.category,
                            child: [item]
                        }]
                    }
                }
            )
            this.type = this.$store.state.type
            if (this.type == 1) {
                this.selectId = [...this.$store.state.selectidlist1]
            } else if (this.type == 2) {
                this.selectId = [...this.$store.state.selectidlist2]
            } else if (this.type == 3) {
                this.selectId = [...this.$store.state.selectidlist3]
            }
            if (this.selectId.length > 0) {
                this.selectId.forEach(
                    (itemitem) => {
                        this.menulist.forEach(
                            (item, index) => {
                                if (item.child.length > 0) {
                                    (item.child).forEach(
                                        (itemlist, indexlist) => {
                                            if (itemitem == itemlist.categoryId) {
                                                this.menulist[index]['child'][indexlist]['checked'] = true
                                            }
                                        }
                                    )
                                }
                            }
                        )
                    }
                )
            }
        },
        selecteitem (item, index, indexlist) {
            //  debugger;
            this.menulist[index]['child'][indexlist]['checked'] = !this.menulist[index]['child'][indexlist]['checked']

            if (this.menulist[index]['child'][indexlist]['checked']) {
                this.selectId = [...this.selectId, item.localId]
            } else {
                this.selectId.forEach(
                    (items, indexnew) => {
                        if (item.localId == items) {
                            this.selectId.splice(indexnew, 1)
                        }
                    }
                )
            }
            //  this.$forceUpdate();
        },
        selectaLL () {
            this.menulist.forEach(
                (item, index) => {
                    if (item.child.length > 0) {
                        (item.child).forEach(
                            (itemlist, indexlist) => {
                                this.selecteitem(item, index, indexlist)
                            }
                        )
                    }
                }
            )
        },
        savecheck () {
            this.type = this.$store.state.type
            if (this.$route.query.id) {
                if (this.type == 1) {
                    this.$store.state.selectidlist1 = [...this.selectId]
                } else if (this.type == 2) {
                    this.$store.state.selectidlist2 = [...this.selectId]
                } else if (this.type == 3) {
                    this.$store.state.selectidlist3 = [...this.selectId]
                }
            } else {
                if (this.type == 1) {
                    this.$store.state.selectidlist1New = [...this.selectId]
                } else if (this.type == 2) {
                    this.$store.state.selectidlist2New = [...this.selectId]
                } else if (this.type == 3) {
                    this.$store.state.selectidlist3New = [...this.selectId]
                }
            }

            this.$router.replace({ path: '/testing' })
        }
    }
}
</script>
<style scoped>
.page-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    background: #ebeef2;
}
.standard-wrap {
    padding-bottom: 60px;
}
.affirm-wrap {
    position: fixed;
    z-index: 5;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ebeef2;
}
.item-wrap {
    padding-left: 20px;
    background: #fff;
    position: relative;
    z-index: 2;
    margin-bottom: 5px;
}
.affirm {
    position: relative;
    z-index: 2;
    display: block;
    width: 200px;
    height: 40px;
    border-radius: 20px;
    background: #2269ff;
    color: #fff;
    font-size: 15px;
    margin: 10px auto;
}

.lookmsg {
    color: #2269ff;
}
.lookmsgTwo {
    color: #000000;
}
.lookmsgTwo > span {
    margin-left: 10px;
    color: #999999;
}
.lookmsg > span {
    margin-left: 10px;
    color: #999999;
}
.card-padding {
    height: 100px;
    width: 230px;
    padding-right: 30px;
}
.newImage {
    width: 100px;
    height: 74px;
    border-radius: 7px;
    display: inline-block;
}
.contentlist {
    width: 100%;
    height: 106px;
    display: flex;
    justify-content: space-between;
    padding: 16px 20px 16px 0;
    border-bottom: 1px solid #efeff4;
}
.card-title1 {
    width: 100%;
    height: 15px;
    line-height: 15px;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    padding-top: 4px;
}
.selectspan {
    margin-right: 8px;
    color: #b0b0b0;
    font-size: 14px;
}

.checkbox {
    margin-right: 10px;
    font-size: 16px;
}
.icon-selected {
    color: #2269ff;
}
p {
    display: flex;
    line-height: 22px;
    color: #333;
    padding-right: 20px;
}
.standard-item li > div {
    flex: 1;
    padding-right: 20px;
}
.showmsg {
    margin-left: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #efeff4;
}
.topnewtab {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #ebeef2;
    line-height: 40px;
}
</style>
